const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {
	VueLoaderPlugin
} = require('vue-loader/dist/index')
const {
	CleanWebpackPlugin
} = require('clean-webpack-plugin')

module.exports = {
	// mode只有两种模式
	mode: 'development',
	// 入口起点
	entry: './src/main.js',
	output: {
		// path需要绝对路径
		path: path.resolve(__dirname, 'dist'),
		// 每次打包main后面的数字不一样，实现不同版本效果.contenthash也可以换成hash
		filename: 'js/[name].[contenthash].js'
	},
	module: {
		rules: [{
				test: /\.css$/,
				use: ['style-loader', 'css-loader']
				// 前者是为了让style成功去到html里面，后者是为了能够成功打包css
			},
			{
				test: /\.vue$/,
				use: ['vue-loader']
			},
			{
				test: /\.js$/,
				exclude: '/node_modules',
				loader: 'babel-loader'
			}
		]
	},
	plugins: [
		new HtmlWebpackPlugin({
			template: path.resolve(__dirname, './index.html'),
			filename: 'index.html',
			title: '手动搭建vue-cli'
		}),
		// 会读取module里面的rules,并将vue的三个模板解析
		new VueLoaderPlugin(),
		new CleanWebpackPlugin()
	],
	devServer: {
		static: {
			directory: path.join(__dirname, './dist'),
		},
		compress: true,
		port: 8080
	}
}
